<template>
  <div style="height: 100%;width: 100%">
    <div class="progress">
      <span class="label">
        整改完成率
      </span>
      <el-progress :text-inside="true" :percentage="chartData.completionRate" class="pro"
                   :color="customColor"></el-progress>
    </div>
    <div class="banner">
      <div class="status">
        <div class="status-num">
          <p class="num" style="color: #00f6e4">{{ chartData.allNum || 0 }}</p>
          <p class="label">全部</p>
        </div>
      </div>
      <div class="status">
        <div class="status-num">
          <p class="num" style="color: #fff43f">{{ chartData.completeNum || 0 }}</p>
          <p class="label">已完成 </p>
        </div>
      </div>
      <div class="status">
        <div class="status-num">
          <p class="num" style="color: #ff4e4e">{{ chartData.incompleteNum || 0 }}</p>
          <p class="label">未完成</p>
        </div>
      </div>
    </div>
    <Echart
      width="260px"
      style="margin: auto"
      height="260px"
      :options="option"
      ref="charts"
    />
  </div>

</template>

<script>
import { graphic } from 'echarts';
import { rectificationSituation } from '@/api';

export default {
  data() {
    return {
      customColor: '',
      percentage: 20,
      option: {},
      pageflag: false,
      timer: null,
      chartData: {},
    };
  },
  props: ['cycleId'],
  created() {

  },

  watch: {
    cycleId(cycleId) {
      this.getData(cycleId);
    },
  },
  mounted() {
    this.getData(this.cycleId);
  },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData(cycleId) {
      this.pageflag = true;
      // this.pageflag =false
      rectificationSituation(cycleId).then((res) => {
        if (res.success) {
          this.chartData = res.data;
          this.$nextTick(() => {
            this.init(res.data);
          });
        }
      });
    },
    //轮询
    init(data) {

      this.option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        position: 'center',
        title: {
          text: '问题总数',//主标题文本
          subtext: data.allNum,//副标题文本
          left: '49%',
          top: '37%',
          textAlign: 'center',
          textStyle: {
            fontSize: 20,
            fontFamily: 'PingFangSC-Semibold',
            fontWeight: 'bold',
            color: '#fff',
            align: 'center',
          },
          subtextStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontWeight: 'bold',
            fontSize: 30,
            color: '#fff43f',
            align: 'center',
          },
        },
        series: [
          {
            name: '整改情况',
            type: 'pie',
            radius: ['48%', '65%'],
            center: ['50%', '50%'],
            barGap: 5,
            avoidLabelOverlap: false,
            label: {
              show: true,
              formatter(param) {
                return param.percent + '%';
              },
              fontSize: 18,
              fontFamily: 'PingFangSC-Semibold',
              emphasis: {//中间文字显示
                show: true,
              },
            },
            emphasis: { // 高亮状态的扇区和标签样式。
              label: { // 标签内容
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
                formatter: '{total|' + '{b}' + '占比}' + '\n\r' + '{active|{d}%}',
                rich: {
                  total: {
                    fontSize: 16,
                    fontFamily: 'PingFangSC-Semibold',
                    color: '#454c5c',
                  },
                  active: {
                    fontFamily: 'PingFangSC-Semibold',
                    fontSize: 20,
                    color: '#6c7a89',
                    lineHeight: 30,
                  },
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                value: data.completeNum, name: '已完成',
                itemStyle: {
                  color: '#00f6e4',
                },
              },
              {
                value: data.incompleteNum, name: '未完成', itemStyle: {
                  color: '#ff4e4e',
                },
              },
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 1600,
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss'>
.banner {
  background-image: url("~@/assets/img/巡察覆盖内背景框.png");
  width: 100%;
  height: 100px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;

  .status {
    width: 33%;
    cursor: pointer;

    .status-num {
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      .num {
        font-family: YouSheBiaoTiHei;
        font-size: 36px;
        font-weight: normal;
        font-stretch: normal;
        margin-bottom: 6px;
        letter-spacing: 0px;
        color: #00f6e4;
      }

      .label {
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        font-weight: 600;
        font-stretch: normal;
        line-height: 22px;
        letter-spacing: 0px;
        color: #ffffff;
      }
    }
  }
}

.progress {
  height: 12%;
  width: 100%;
  margin: 20px 10px 0 10px;
  display: flex;

  .pro {
    width: calc(100% - 140px);

    .el-progress-bar__outer {
      height: 16px !important;
      border-radius: 0 !important;
      background-color: rgba(45, 173, 239, 0.2) !important;;
    }

    .el-progress-bar__inner {
      background-image: linear-gradient(77deg,
        #019ac8 0%,
        #0af1c3 100%);
      border-radius: 0;
    }
  }


  .label {
    width: 120px;
    font-family: MicrosoftYaHei;
    font-size: 18px;
    font-weight: 600;
    font-stretch: normal;
    line-height: 18px;
    letter-spacing: 0px;
    color: #ffffff;
  }
}
</style>
